<template>
  <div class="all-page">
    <el-button type="primary" class="back-button" @click="back">返回上级页面</el-button>
    <el-button type="primary" class="back-button" @click="print">打印报表</el-button>

    <div v-for="(page, pageIndex) in dataPages" :key="'page-' + pageIndex" class="page">
      <div class="document-header">
        <h1 class="document-title">混凝土测温记录</h1>
      </div>
      <table class="main-table">
        <tr>
          <td rowspan="2" colspan="10">混凝土同条件养护（600℃.d）实际龄期和相应温度记录表</td>
          <td>表号</td>
          <td></td>
        </tr>
        <tr>
          <td>编号</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2" style="width: 20%">工程名称</td>
          <td colspan="10">{{ previewData.subprojectName || '' }}</td>
        </tr>
        <tr>
          <td colspan="2">工程部位</td>
          <td colspan="7"> {{ previewData.usePart || '' }}</td>
          <td>成型日期</td>
          <td colspan="2">{{ reportData.witnessDate || '' }}</td>
        </tr>
        <tr>
          <td rowspan="2" class="fixed-width">序号</td>
          <td rowspan="2" class="special-width">强度等级</td>
          <td colspan="3">日期</td>
          <td colspan="6">气温</td>
          <td rowspan="2" class="fixed-width">有效天数累计</td>
        </tr>
        <tr>
          <td class="fixed-width">年</td>
          <td class="fixed-width">月</td>
          <td class="fixed-width">日</td>
          <td class="fixed-width">1</td>
          <td class="fixed-width">2</td>
          <td class="fixed-width">3</td>
          <td class="fixed-width">4</td>
          <td class="fixed-width">平均温度（℃）</td>
          <td class="fixed-width">累计温度（℃）</td>
        </tr>
        <tr v-for="(item, index) in page.rows" :key="'row-' + pageIndex + '-' + index" class="data-row">
          <td class="num fixed-width">{{ item.isEmpty ? '' : (pageIndex * 30) + index + 1 }}</td>
          <td class="special-width">{{ item.isEmpty ? '' : (previewData.concreteStrength || '') }}</td>
          <td class="num fixed-width">{{ item.year || '' }}</td>
          <td class="num fixed-width">{{ item.month || '' }}</td>
          <td class="num fixed-width">{{ item.day || '' }}</td>
          <td class="num fixed-width">{{ item.temperature1 || '' }}</td>
          <td class="num fixed-width">{{ item.temperature2 || '' }}</td>
          <td class="num fixed-width">{{ item.temperature3 || '' }}</td>
          <td class="num fixed-width">{{ item.temperature4 || '' }}</td>
          <td class="num fixed-width">{{ item.averageTemperature || '' }}</td>
          <td class="num fixed-width">{{ item.sumTemperature || '' }}</td>
          <td class="num fixed-width">{{ item.isEmpty ? '' : (pageIndex * 30) + index + 1 }}</td>
        </tr>
        <tr>
          <td colspan="2">结论</td>
          <td colspan="10" class="num conclusion-cell">{{ lastDataSummary }}</td>
        </tr>
        <tr>
          <td colspan="2">技术负责人</td>
          <td colspan="3"></td>
          <td></td>
          <td></td>
          <td colspan="2">测温员</td>
          <td colspan="3"></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

/*
 *    这个报表真麻烦！！！
 *
 */
import { searchConcreteTemperatureItem } from '@/api/statementManage/hunNingTu/hunNingTu'
import router from '@/router'

export default {
  data() {
    return {
      localStorageId: '',
      reportData: { witnessDate: null, temperatures: [] },
      previewData: {},
      projectName: '',
      subprojectName: ''
    }
  },
  computed: {
    dataPages() {
      const temperatures = this.reportData.temperatures || []
      const pages = []
      const pageSize = 30

      for (let i = 0; i < temperatures.length; i += pageSize) {
        const pageRows = temperatures.slice(i, i + pageSize)
        // 如果不足30行，用空行填充，但序号和累计天数不显示
        while (pageRows.length < pageSize) {
          pageRows.push({
            year: '', month: '', day: '', temperature1: '', temperature2: '',
            temperature3: '', temperature4: '', averageTemperature: '', sumTemperature: '',
            isEmpty: true // 标记为空行
          })
        }
        pages.push({
          rows: pageRows
        })
      }

      // 如果没有数据，至少创建一个空页面
      if (pages.length === 0) {
        const emptyRows = Array(pageSize).fill().map(() => ({
          year: '', month: '', day: '', temperature1: '', temperature2: '',
          temperature3: '', temperature4: '', averageTemperature: '', sumTemperature: '',
          isEmpty: true
        }))
        pages.push({
          rows: emptyRows
        })
      }

      return pages
    },
    lastDataSummary() {
      const temperatures = this.reportData.temperatures || []
      if (temperatures.length === 0) {
        return ''
      }
      const lastData = temperatures[temperatures.length - 1]
      const totalDays = temperatures.length
      return `${lastData.sumTemperature}℃  ${totalDays}D`
    }
  },
  async mounted() { // 钩子函数
    const localStorageId = this.$route.query.localStorageId
    this.localStorageId = localStorageId // 保存id用于销毁时清理
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId)
      if (data) {
        this.previewData = JSON.parse(data)
        const { result } = await searchConcreteTemperatureItem(this.previewData.dataId)
        console.log(result)
        this.reportData = result
      }
    }
  },
  beforeDestroy() { // 离开页面要做的事
    // 那就是清除localstorage！！！
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document.querySelector('body').setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
  },
  methods: {
    back() {
      router.push({ path: '/menus/statement/statementTable/tongHun-ceWenJiLu' })
    },
    print() {
      window.print()
    }
  }
}
</script>

<style>
.all-page {
  width: 100%;
  padding-bottom: 5%;
}

.back-button {
  position: fixed;
  top: 1.5rem;
  left: 6.25rem;
  z-index: 1000;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.back-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.page {
  padding: 2% 2% 0;
  width: 65%;
  aspect-ratio: 210 / 297;
  /* A4 竖版比例 */
  margin: 5% auto;
  background-color: white;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  line-height: 1.25rem;
}

.document-header {
  text-align: center;
  margin-bottom: 2%;
}

.document-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 3.125rem;
  padding: 1% 0;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

.value {
  margin-right: 3%;
}

.kai-font {
  font-size: 0.9375rem;
}

.num {
  font-family: "Times New Roman", serif;
}

.math {
  font-family: "Times New Roman", serif;
}

.main-table {
  width: 90%;
  border-collapse: collapse;
  border: 0.18rem solid #000;
  margin: 1rem auto 0;
}

.main-table th,
.main-table td {
  border: 0.1rem solid #000;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 0.3rem 0.2rem;
}

.fixed-width {
  width: 8%;
  min-width: 8%;
  max-width: 8%;
}

.special-width {
  width: 12%;
  min-width: 12%;
  max-width: 12%;
}

.data-row td {
  height: 2.1rem;
  min-height: 2.1rem;
  max-height: 2.1rem;
  vertical-align: middle;
}

.conclusion-cell {
  text-align: left !important;
  font-size: 1.1rem;
  padding-left: 1.2rem !important;
}

.header-row th {
  background-color: #f2f2f2;
  font-weight: bold;
  font-size: 0.9rem;
}

.page {
  page-break-after: always;
  margin-bottom: 2rem;
}

.page:last-child {
  page-break-after: avoid;
  margin-bottom: 0;
}

/* 打印样式 */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .all-page {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
  }

  .back-button {
    display: none !important;
  }

  .page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0.3in !important;
    box-shadow: none !important;
    background: white !important;
    page-break-after: always;
    page-break-inside: avoid;
    font-size: 0.75rem !important;
  }

  .page:last-child {
    page-break-after: avoid;
  }

  .document-header {
    margin-bottom: 0.1in !important;
    background: white !important;
  }

  .document-title {
    margin: 1rem !important;
    padding: 0 !important;
    font-size: 1rem !important;
    background: white !important;
    color: black !important;
  }

  .main-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    font-size: 0.7rem !important;
    table-layout: fixed !important;
    background: white !important;
  }

  .main-table th,
  .main-table td {
    border: 1px solid #000 !important;
    padding: 0.05in 0.02in !important;
    vertical-align: middle !important;
    page-break-inside: avoid;
    height: 0.25in !important;
    min-height: 0.25in !important;
    max-height: 0.25in !important;
    line-height: 1.2 !important;
    background: white !important;
    color: black !important;
  }

  .data-row td {
    height: 0.25in !important;
    min-height: 0.25in !important;
    max-height: 0.25in !important;
    line-height: 1.2 !important;
    background: white !important;
    color: black !important;
  }

  .fixed-width {
    width: 8% !important;
    min-width: 8% !important;
    max-width: 8% !important;
    background: white !important;
  }

  .special-width {
    width: 12% !important;
    min-width: 12% !important;
    max-width: 12% !important;
    background: white !important;
  }

  .conclusion-cell {
    text-align: left !important;
    font-size: 0.8rem !important;
    padding-left: 0.1in !important;
    font-weight: bold !important;
    background: white !important;
    color: black !important;
  }

  .num {
    font-family: "Times New Roman", serif !important;
    background: white !important;
    color: black !important;
  }

  .kai-font {
    font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif !important;
    background: white !important;
    color: black !important;
  }

  /* 确保所有行高度一致 */
  .main-table tr td {
    height: 0.25in !important;
    min-height: 0.25in !important;
    max-height: 0.25in !important;
    line-height: 1.2 !important;
    background: white !important;
    color: black !important;
  }

  /* 去除所有可能的背景色和阴影 */
  .main-table tr {
    background: white !important;
  }

  .main-table tr:nth-child(even) {
    background: white !important;
  }

  .main-table tr:nth-child(odd) {
    background: white !important;
  }
}

@media print {
  @page {
    size: A4 portrait;
  }
}
</style>
